---
id: menu
title: Menu
sidebar_label: Menu
---

The `Menu` component provides a flexible dropdown menu functionality. It leverages the `@radix-ui/react-dropdown-menu` for accessibility and customization features. The `Menu` component and its sub-component, `MenuItem`, can be easily styled and incorporated into your UI for various needs such as navigation menus, options menus, and more.

## Usage

The `Menu` component requires a `trigger` element to toggle the visibility of the menu and can accept any ReactNode as its children, which typically includes `MenuItem` components for the menu options.

import CodeSample from "../../src/CodeSample";
import CodeBlock from "@theme/CodeBlock";

## Basic Menu

A simple example of using the `Menu` component to create a dropdown menu.

import MenuBasicDemo from '../../samples/components/menu/menu_basic';
import MenuBasicSource from '!!raw-loader!../../samples/components/menu/menu_basic';

<CodeSample>
    <MenuBasicDemo/>
</CodeSample>

<CodeBlock language="tsx">{MenuBasicSource}</CodeBlock>

## Controlled Menu

You can control the visibility of the `Menu` component by passing the `open` and `onOpenChange` props.

import MenuControlledDemo from '../../samples/components/menu/menu_controlled';
import MenuControlledSource from '!!raw-loader!../../samples/components/menu/menu_controlled';

<CodeSample>
    <MenuControlledDemo/>
</CodeSample>

<CodeBlock language="tsx">{MenuControlledSource}</CodeBlock>

## Dense Menu Items

Showing how to make the `MenuItem` components dense for a more compact menu appearance.

import MenuDenseItemsDemo from '../../samples/components/menu/menu_dense_items';
import MenuDenseItemsSource from '!!raw-loader!../../samples/components/menu/menu_dense_items';

<CodeSample>
    <MenuDenseItemsDemo/>
</CodeSample>

<CodeBlock language="tsx">{MenuDenseItemsSource}</CodeBlock>
